<template>
  <div class="app-container">
    <Crud :tableData="tableData" ref="tableRef" @onToEdit="onToEdit">
      <template #sex="{ row }">
        <el-tag type="success">{{ row.sex }}</el-tag>
      </template>
      <template #handle="{ row }">
        <el-button type="primary" text>编辑</el-button>
        <el-button type="primary" text>禁用</el-button>
      </template>
    </Crud>
  </div>
</template>

<script setup lang="ts" name="table-curd">
import { getTableList } from '@/api/table'

const tableData = reactive({
  data: [],
  column: [
    {
      type: 'selection'
    },
    {
      prop: 'realName',
      label: '姓名'
    },
    {
      prop: 'userName',
      label: '账户'
    },
    {
      prop: 'department',
      label: '部门'
    },
    {
      prop: 'sex',
      label: '性别',
      slotName: "sex"
    },
    {
      prop: 'age',
      label: '年龄'
    },
    {
      prop: 'role',
      label: '角色'
    },
    {
      prop: 'position',
      label: '岗位'
    },
    {
      prop: 'email',
      label: '邮箱',
      showOverflowTooltip: true
    },
    {
      prop: 'joinDate',
      label: '入职日期'
    },
    {
      prop: 'state',
      label: '状态'
    },
    {
      label: '操作',
      width: 180,
      slotName: "handle"
    }
  ],
  query: {
    pagination: 1,
    size: 10,
    keyword: ''
  },
  setting: {
    add: true,
    edit: true,
    del: true,
    exp: true,
  },
  api: getTableList
})

const tableRef = ref()

onMounted(() => {
  //console.log(tableRef.value.tableEl);
})

const onToEdit = (val: any) => {
  console.log(val);
}


</script>

<style lang="scss" scoped>

</style>
